
SAPolyOverlay.prototype = new google.maps.OverlayView();

function SAPolyOverlay(opts) {
    this.map_ = opts.map;
    this.filter_ = 1;
    this.id = opts.id;
    this.imgid = opts.id + "img";
    this.clickid = opts.id + "clickmap";
    this.url_prefix = opts.url_prefix;
    this.div_ = document.createElement('div');
    this.div_.style.borderStyle = "none";
    this.div_.style.borderWidth = "0px";
    this.div_.style.position = "absolute";
    this.div_.id = this.id;
    this.img_ = document.createElement("img");
    this.img_.id = this.imgid;
    this.img_.style.width = "100%";
    this.img_.style.height = "100%";
    this.img_.style.border = "none";
    this.img_.useMap = '#polyclickmap';
    this.div_.appendChild(this.img_);
    this.imageUrl = "";
    this.clickmapcon_ = document.createElement('div');
    this.div_.appendChild(this.clickmapcon_);
    this.setMap(this.map_);
    this.idle_listener_ = google.maps.event.addListener(this.map_,'idle',this.refresh.createDelegate(this));
    this.mouseover = opts.mouseover;
    this.mouseout = opts.mouseout;
    this.dataloaded = opts.dataloaded;
}
SAPolyOverlay.prototype.onAdd = function() {
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div_);
}
SAPolyOverlay.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var bounds = this.map_.getBounds()
    var sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
}
SAPolyOverlay.prototype.setImageUrl = function(fn) {
    this.imageUrl = fn;
}
SAPolyOverlay.prototype.refresh = function() {
    var overlayProjection = this.getProjection();
    var bounds = this.map_.getBounds();
    if (!bounds) {
	return;
    }
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var swpx = overlayProjection.fromLatLngToDivPixel(sw);
    var nepx = overlayProjection.fromLatLngToDivPixel(ne);
    var width = (nepx.x - swpx.x);
    var height = (swpx.y - nepx.y);
    var zoom = this.map_.getZoom();
    params = {
	ll_lat:sw.lat(),
	ll_lon:sw.lng(),
	ur_lat:ne.lat(),
	ur_lon:ne.lng(),
	width:width,
	left: sw.x,
	top: ne.y,
	zoom:this.map_.getZoom(),  
	height:height
    };
    var url = this.getDefUrl(params);
    if (this.ajaxId) {
	Ext.Ajax.abort(this.ajaxId);
    }
    this.ajaxId = Ext.Ajax.request({
	    url:url,
	    disableCaching:false,
	    success:this.loaded.createDelegate(this),
	    failure:this.failed.createDelegate(this)
	});
}
SAPolyOverlay.prototype.getDefUrl = function(params) {
    var url = this.url_prefix + "?" + Ext.urlEncode(params);
    return url;
}
SAPolyOverlay.prototype.loaded = function(t) {
    var data = Ext.util.JSON.decode(t.responseText);
    var img_src = data["img"];
    var overlayProjection = this.getProjection();
    var bounds = this.map_.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var swpx = overlayProjection.fromLatLngToDivPixel(sw);
    var nepx = overlayProjection.fromLatLngToDivPixel(ne);
    var width = (nepx.x - swpx.x);
    var height = (swpx.y - nepx.y);
    var div = this.div_;
    div.style.left = swpx.x + 'px';
    div.style.top = nepx.y + 'px';
    div.style.width = width + 'px';
    div.style.height = height + 'px';
    var clickmap = document.getElementById(this.clickid);
    if (clickmap) {
	this.clickmapcon_.removeChild(clickmap);
    }
    clickmap = document.createElement("map");
    clickmap.id = this.clickid;
    var clickmapname = (new Date()).getTime();
    clickmap.name = clickmapname;
    console.log(clickmapname);
    for (var i = 0; i < data["recs"].length; i++) {
	var rec = data["recs"][i];
	coords_arr = rec[0];
	for (var j = 0; j < coords_arr.length; j++) {
	    var area = document.createElement("area");
	    area.shape = "poly";
	    area.coords = coords_arr[j];
	    area.nohref = true;
	    if (this.mouseover) {
		area.onmouseover = function(e,rec) {
		    this.mouseover(e,rec);
		}.createDelegate(this,[rec],true);
	    }
	    if (this.mouseout) {
		area.onmouseout = function(e,rec) {
		    this.mouseout(e,rec);
		}.createDelegate(this,[rec],true);
	    }
	    clickmap.appendChild(area);
	}
    }
    this.clickmapcon_.appendChild(clickmap);
    var img = document.getElementById(this.imgid);
    if (img) {
	this.div_.removeChild(img);
    }
    img = document.createElement("img");
    img.id = this.imgid;
    img.style.width = "100%";
    img.style.height = "100%";
    img.style.border = "none";
    img.useMap = '#' + clickmapname;
    img.src = "data:image/png;base64," + img_src;
    this.div_.appendChild(img);
    this.img_ = img;
    if (this.dataloaded) {
	this.dataloaded(data);
    }
}
SAPolyOverlay.prototype.failed = function(t) {
    this.img_.src = "";
}
SAPolyOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
    google.maps.event.removeListener(this.idle_listener_);
}
SAPolyOverlay.prototype.setImageUrl = function(url) {
    this.imageUrl = url;
}
SAPolyOverlay.prototype.setOpacity = function(n) {
    if (n < 0) {
	n = 0;
    } else if (n > 1) {
	n = 1;
    }
    this.filter_ = n;
    this.div_.style.opacity = n;
    this.div_.style.filter = 'alpha(opacity=' + n*100 + ')';
}
